import { React, useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Card, Space, Divider, Image, Typography, Button, Radio, Input, InputNumber } from 'antd';
import MockExam from './mockExam'
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import axios from 'axios';
import api from '../../utils/requestUtils/apiConfig'

export default () => {
    const { Title, Text, Link } = Typography;
    const [title, setTitle] = useState('');
    const [a, setA] = useState('');
    const [b, setB] = useState('');
    const [c, setC] = useState('');
    const [d, setD] = useState('');
    const [answer, setAnswer] = useState('');
    const [pictureUrl, setPictureUrl] = useState('');
    const [id, setId] = useState(1);

    //当前选择得选中值
    const [optionValue, setOptionValue] = useState('0');

    const getQuestionById = async (id) => {
        const params = {
            id:id
        }
        axios({
            url: api.getSubjectOneCarById,
            method: 'get',
            headers: '',
            params: params,
        }).then((result) => {
            const res = result.data.data
            setTitle(res.question)
            setA(res.optionOne)
            setB(res.optionTwo)
            setC(res.optionThree)
            setD(res.optionFour)
            setAnswer(res.answer)
            if (res.picture !== '') {
                setPictureUrl('http://image.jsyst.cn/images201305/' + res.picture)
            } else {
                setPictureUrl('')
            }
        }).catch(() => {

        })
    }

    const radioStyle = {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
    };
    //下一题按钮回调方法
    const nextQuestion = () => {
        setId(id + 1)
        getQuestionById(id)
        setOptionValue('0')
    }
    const beforeQuestion = () => {
        setId(id - 1)
        getQuestionById(id)
        setOptionValue('0')
    }
    //输入框调用
    const selectQuestion = (value) => {
        setId(value)
        getQuestionById(value)
        setOptionValue('0')
    }

    //单选按钮 选择后得回调方法



    //选择正确与否得显示
    // const test = () =>{
    //     if(answer===optionValue){
    //         return (
    //             <Text type="success">正确</Text>
    //         )
    //     }
    //         return(
    //             <Text type="danger">错误</Text>
    //         )

    // }
    //循环放置题目按钮
    // const question = () => {
    //     const questions = []
    //     for (let i = 1; i <= 100; i++) {
    //         questions.push(<Radio.Button value={i} >{i}</Radio.Button>)
    //     }
    //     return questions
    // }
    useEffect(async () => {
        getQuestionById(1);
    }, [])



    return (
        <div>
            <Space
                direction="vertical"
                split={<Divider />}>

                <Card style={{ width: 1050}}>
                    <Space split={<Divider />} size='large' direction="vertical" >
                        <div >
                            <Space split={<Divider />} size={150} >
                                <Space direction='vertical'style={{height:210}}>
                                    <Title level={5}>{id}.{title}</Title>

                                    <Radio.Group onChange={(value) => { setOptionValue(value.target.value) }} value={optionValue}>
                                        <Radio style={radioStyle} value={'1'}>
                                            A：{a}
                                        </Radio>
                                        <Radio style={radioStyle} value={'2'}>
                                            B：{b}
                                        </Radio>
                                        {c != '' ? <Radio style={radioStyle} value={'3'}>C：{c}</Radio> : <></>}
                                        {d != '' ? <Radio style={radioStyle} value={'4'}>D：{d}</Radio> : <></>}
                                    </Radio.Group>
                                </Space>
                                <>
                                    <Image
                                        width={420}

                                        src={pictureUrl}

                                    />
                                </>
                            </Space>
                        </div>
                        <p>{optionValue === '0' ? <></> : answer === optionValue ? <Text type="success">正确</Text> : <Text type="danger">错误</Text>}</p>
                        <div>
                            <Space>
                                <Button onClick={beforeQuestion}>上一题</Button>
                                <Button onClick={nextQuestion}>下一题</Button>
                                <Text>{`第${id}/1805题`}</Text>
                                <InputNumber min={1} max={1804} value={id} onChange={selectQuestion} />
                            </Space>

                        </div>
                    </Space>

                </Card>
                <div
                    style={{
                        width: 1201,
                        maxHeight: 267,
                        overflow: 'auto',
                        marginTop: 20
                    }}>
                    <Card title="进度" style={{ width: 1050 }}>

                        {/* <Radio.Group
                            // value='small'
                            optionType="button"
                            buttonStyle="solid" >
                            {question()}
                        </Radio.Group> */}
                    </Card>

                </div>
            </Space>
        </div>
    )
}